<template>
  <div class="title">
        <div class="titile-con">
            <div class="titile-con-left">
                <!-- <img :src="logoImg"> -->
                <span>
                    <i class="iconfont icon-xinhao1"></i>
                    {{ name }}
                </span>
            </div>
            <div class="title-con-center">
                <ul>
                    <li v-for="(item,index) in titleList" :key="index">
                        {{ item }}
                    </li>
                </ul>
            </div>
            <div class="title-con-right">
                <a href="">登录</a>
                <a href="">注册</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Title',
    data(){
        return{
            name:"我的博客",
            titleList:[
                "首页","SpringBoot","Java","Vue","Mysql","联系我"
            ]
        }
    }
}
</script>

<style>
    .title{
        width: 100%;
        height: 50px;
        background-color: #2f4056;
    }
    .titile-con{
        width: 1170px;
        height: 50px;
        margin: 0 auto;
    }
    .titile-con-left{
        width: 15%;
        height: 50px;
        float: left;
    }
    .titile-con-left > img{
        height: 12px;
        padding: 5px;
        margin-top: 14px;
        float: left;
    }
    .titile-con-left > span{
        color: rgba(255,255,255,0.7);
        font-size: 22px;
        font-weight: 600;
        margin-top: 10px;
        display: block;
        float: left;
        margin-left: 5px;
    }
    .title-con-center{
        width: 70%;
        height: 50px;
        float: left;
    }
    .title-con-center > ul{
        list-style: none;
    }
    .title-con-center > ul > li{
        float: right;
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
        color: rgba(255,255,255,0.7);
        cursor: pointer;
    }
    .title-con-center > ul > li:hover{
        color: rgba(255,255,255,1);
    }
    .title-con-right{
        width: 15%;
        height: 50px;
        float: left;
        line-height: 50px;
        text-align: center;
    }
    .title-con-right > a{
        padding: 0 3px;
        color: rgba(255,255,255,0.7);
        text-decoration: none;
    }
    .title-con-right > a:hover{
        color: rgba(255,255,255,1);
    }
</style>